<script setup>
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
	list: {
		type: Array,
		default: () => []
	}
});

const emits = defineEmits(['item-header-click', 'point-click', 'point-hover']);
const handleItemHeaderClick = data => emits('item-header-click', data);
const handlePointClick = (pointData, roomData) => emits('point-click', { pointData, roomData });

// hover point-list-icon时派发事件
const pointListIconRef = ref(null);

// const handlePointListIconHover = (data, item) => {
// 	emits('point-hover', {
// 		x: data.x,
// 		y: data.y,
// 		roomName: item.name
// 	});
// };

</script>

<template>
	<div class="side-bar-container">
		<div class="collapse-container">
			<n-scrollbar style="max-height: calc(100vh - 50px);">
			<n-collapse arrow-placement="right" @item-header-click="handleItemHeaderClick">
				<n-collapse-item v-for="(item, index) in list" :key="index" :title="item.name" :name="item.name" class="collapse-item">
					<div class="point-list" v-for="(iv, i) in item.cornerList" >
						<span
							class="point-list-icon"
							ref="pointListIconRef"
							@click="handlePointClick(iv, item)"
						>
								{{ `(${iv.x}, ${iv.y})` }}
						</span>
					</div>
					<template #header-extra>
						<div class="item-extra-info">{{ item.cornerList.length }}个点</div>
					</template>
					</n-collapse-item>
				</n-collapse>
			</n-scrollbar>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.side-bar-container {
	position: absolute;
	top: 73px;
	width: 300px;
	height: calc(100vh - 50px);
	background-color: #f0f0f0;
	border-right: 1px solid #ccc;
	overflow: hidden;
	padding-top: 10px;

	.collapse-container {
		box-sizing: border-box;
		user-select: none;

		.point-list {
			font-size: 14px;
			color: #333;
			cursor: pointer;
			transition: all 0.3s;
			padding-left: 20px;

			// 不可选中文字
			user-select: none;

			&:hover {
				background-color: #ccc;
				font-weight: 700;
				font-size: 18px;
			}

			&::before {
				content: '';
				display: inline-block;
				width: 8px;
				height: 8px;
				background-color: #4CAF50;
				border-radius: 50%;
				margin-right: 5px;
				margin-left: -5px;
				font-weight: 500;
			}
		}

		.item-extra-info {
			font-size: 14px;
			color: #333;
			margin-right: 30px;
		}
	}

	// 修改折叠项标题样式
	:deep(.n-collapse-item__header) {
		font-size: 14px;
		font-weight: 700;
		transition: all 0.3s;
		margin-left: 10px;
		box-sizing: border-box;
		border-bottom: 1px solid #ccc;
		padding: 0;
		padding-bottom: 3px;
		&:hover {
			background-color: #f0f0f0;
		}
	}

	// :deep(.n-collapse-item__content-wrapper) {
	// 	padding-top: 0;
	// }

	// :deep(.n-collapse-item__content-inner) {
	// 	padding-top: 0;
	// }
}
</style>